<!--
 * @Author: dfh
 * @Date: 2024-03-19 18:15:22
 * @LastEditors: dfh
 * @Modified By: dfh
 * @describe: 
-->
<template>
    <view class="container" v-if="bankList && bankList.length > 0">
        <view class="txt-black-34 txt-32 mb-10">选卡攻略</view>
        <view class="card-list">
            <view class="card-item" @click="navigateTo(item.id)" v-for="(item, index) in bankList" :key="index">
                <image :src="item.bankIcon" class="bank-card" mode="widthFill" />
                <view class="txt-black-34 txt-28 mt-20">{{ item.name }}</view>
                <view class="flex ai-center mt-10">
                    <text class="txt-black-102 mt-6 txt-22 mr-8">成功率</text>
                    <RateWidget :rate="item.successRate" />
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
// import { fetchBankList } from '@/services/bank'
// import { onMounted, ref } from 'vue';
import RateWidget from '@/components/rate-widget.vue';
// import {showToast} from '@/utils/toast'

defineProps({
    bankList: {
        type: Array,
        default: () => []
    }
})
// const bankList = ref([]);
// onMounted(() => {
//     getBankList();
// })

// const getBankList = async () => {
//     const { msg, status, data } = await fetchBankList();
//     if (status === 1) {
//         bankList.value = data || [];
//     } else {
//         showToast(msg || '获取银行卡列表失败')
//     }
// }

const navigateTo = () => {
    uni.navigateTo({ url: `/pages/bankCard/index` })
}
</script>

<style lang="scss" scoped>
.container {
    width: 100%;
    display: flex;
    flex-direction: column;
    padding: 0rpx 20rpx 30rpx;
    box-sizing: border-box;

    .card-list {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .card-item {
            display: flex;
            flex-direction: column;
            margin-top: 20rpx;
            width: 48%;
            /* height: 100rpx; */
            background-color: white;
            border-radius: 30rpx;
            padding: 20rpx;
            box-sizing: border-box;

            .bank-card {
                width: 100%;
                height: 160rpx;
                border-radius: 20rpx;
                /* background-color: rgba(0,0,0,.6); */
            }
        }

        .card-item:nth-child(2n) {
            margin-left: 2%;
        }

        .card-item:nth-child(2n+1) {
            margin-right: 2%;
        }
    }
}
</style>